<template>
  <div>
    <!-- 头部 -->
    <div class="ui-header-item gradient">
      <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
        <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
      </div>
      <div class="ui-header-title">邮箱设置</div>
    </div>
    <div>
      <!-- 表单内容 -->
      <van-form validate-first @submit="onSubmit">
        <van-field
          clearable
          v-model="form.user_email"
          name="user_email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ pattern: regular.email, message: '请输入正确的邮箱' }]"
        />

        <van-field
          clearable
          v-model="form.pic_code"
          name="pic_code"
          label="图片验证"
          placeholder="请输入图片内容"
          maxlength="4"
          type="digit"
          :rules="[{ pattern: regular.required, message: '请输入验证码' }]"
        >
          <template #button>
            <img
              class="ui-message-img"
              :src="imgCode"
              @touchstart.stop
              @click="handleIdentifyClick"
            />
          </template>
        </van-field>

        <van-field
          clearable
          v-model="form.msg_content"
          name="msg_content"
          label="验证码"
          placeholder="邮箱验证码"
          maxlength="4"
          type="digit"
          :rules="[{ pattern: regular.required, message: '请输入邮箱验证码' }]"
        >
          <template #button>
            <van-button
              :disabled="sendMassage == '发送验证码' ? false : true"
              native-type="button"
              size="small"
              type="primary"
              class="ui-message-btm"
              @click.stop="getCode"
              >{{ sendMassage }}</van-button
            >
          </template>
        </van-field>

        <div style="margin:.85rem;">
          <van-button
            default
            block
            type="info"
            color="#2398aa"
            native-type="submit"
            @click="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import mixinCommon from "@/views/content/mixins/common";
import mixinRequest from "@/views/content/mixins/request";
import loginData from "@/assets/data/login";
// 路由引入
import menuData from "@/assets/data/menu";
// 引入验证正则表达式
import Validator from "@/utils/validator";
import { regular } from "@/utils/validate";
import { LocalStorage } from "@/utils/storage";
export default {
  name: "my/email",
  data() {
    return {
      sending: false,
      // 表单变量
      form: {
        pic_code: "",
        msg_content: "",
        user_email: "",
      },
      sendMassage: "发送验证码",
      // 验证正则规则
      regular: regular,
      // 图片验证码
      imgCode:
        this.baseUrl +
        "/duzikai_api_mgr_image_code.png?invoke_method=public_page_4m_random_code&pre_db_para_length_4_list=4&t=" +
        new Date().getTime(),
    };
  },
  mixins: [mixinCommon, mixinRequest],
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.getPageInfo({
        name: "my",
        param: {
          invoke_method: "user_and_shop_info",
        },
      }).then(({ result, response }) => {
        this.public_agent_info = result.public_agent_info || {};
        this.public_user_info = result.public_user_info || {};
        document.title = this.public_agent_info.application_name;
        this.setState({
          key: "public_agent_info",
          value: this.public_agent_info,
        });
        this.setState({
          key: "public_user_info",
          value: this.public_user_info,
        });
      });
    },
    // 提交表单
    onSubmit() {
      // 账号密码登录
      if (!this.sending) {
        this.sending = true;
        this.$http
          .post({
            name: "my.email",
            data: {
              invoke_method: "change_email",
              user_email: this.form.user_email,
              pre_cmd_para_pic_code: this.form.pic_code,
              pre_cmd_para_msg_content: this.form.msg_content,
              pre_cmd_para_need_pic_code: "true",
            },
            loading: {
              enabled: true,
            },
          })
          .then(({ result, response }) => {
            // 返回上一个页面
            this.handleHistory();
          })
          .catch(({ msg }) => {
            console.log("shibail");
            this.sending = false;
            this.showMessage(msg);
          });
      }
    },
    // 获取邮箱的验证码
    getCode(event) {
      var that = this;
      var target = event.currentTarget;
      if (!Validator({ value: this.form.pic_code, type: "positiveInteger" })) {
        this.showToast("图片验证码格式不正确", false);
        return;
      }
      if (this.sendMassage === "发送验证码") {
        this.$http
          .post({
            name: "login",
            data: {
              invoke_method: "send_msg_2_email",
              user_email: this.form.user_email,
              pre_cmd_para_db_exist_user: false,
              pic_code: this.form.pic_code,
              id_public_data_admin_user: 800,
              pre_cmd_para_need_pic_code: "true",
            },
            loading: {
              enabled: false,
            },
          })
          .then(({ result, response }) => {
            var data = data || {};
            data.time = 60;
            this.sendMassage = data.time + "S后可重发";
            target.clear = setInterval(function() {
              if (data.time > 1) {
                that.sendMassage = --data.time + "S后可重发";
              } else {
                that.sendMassage = "发送验证码";
                clearInterval(target.clear);
              }
            }, 1000);
          })
          .catch(({ msg, status }) => {
            this.showMessage(msg);
          });
      }
    },
    // 更换图片验证码
    handleIdentifyClick() {
      var picSrc =
        this.baseUrl +
        "duzikai_api_mgr_image_code.png?invoke_method=public_page_4m_random_code&pre_db_para_length_4_list=4&t=" +
        new Date().getTime();
      this.imgCode = picSrc;
    },
  },
  components: {},
  beforeRouteLeave(to, from, next) {
    if (this.$route.query.auth) {
      if (this.isLogin) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.ui-others-wrap {
  margin-top: 2rem;
  font-size: 0.69rem;
  color: #878787;
  line-height: 0.69rem;
  span {
    position: relative;
  }
  span::before {
    content: "";
    position: absolute;
    left: -1.97rem;
    top: 0.25rem;
    display: block;
    width: 1.33rem;
    height: 0.03rem;
    background: #c7c6c9;
  }
  span::after {
    content: "";
    position: absolute;
    right: -1.97rem;
    top: 0.25rem;
    display: block;
    width: 1.33rem;
    height: 0.03rem;
    background: #c7c6c9;
  }
}
.ui-wechart-wrap {
  margin: 0.85rem auto 0 auto;
  width: 6rem;
  height: 2rem;
  background: #07c160;
  font-size: 0.85rem;
  color: #fff;
  border-radius: 1rem;
  &.alipay {
    background: #3366ff;
  }
  .ui-wechart-logo {
    width: 1.41rem;
    height: 1.15rem;
    margin-right: 0.42rem;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(~@/assets/images/wechat-logo.png);
  }
}
</style>
<style>
.van-field__control {
  font-size: 0.8rem;
}
.ui-message-btm {
  margin-right: 0.27rem;
  width: 5.33rem;
  height: 1.81rem;
  border-radius: 0.1rem;
  background-color: #fff3f3;
  border-color: #fff3f3;
  color: #ec4040;
}
.login-jump-wrap {
  margin: 0 0.85rem;
  line-height: 1.2em;
  font-size: 0.8rem;
  color: #666;
}
</style>
